<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title>图片切换</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        section {
            width: 192px;
            margin: 10px auto;
            border: 1px solid gray;
        }
        
        section header {
            background-color: lightgrey;
            text-align: center;
            font-weight: bold;
            padding: 5px 0;
        }
        
        .outer {
            width: 180px;
            height: 151px;
            margin: 5px;
            margin-right: 5px;
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }
        
        .outer span {
            width: 180px;
            left: 0px;
            bottom: 0px;
            color: white;
            padding-left: 20px;
        }
        
        .outer span:nth-of-type(2) {
            width: 180px;
            left: 0px;
            bottom: -20px;
            color: white;
            /*padding-left: 20px;*/
        }
        
        .outer img:nth-of-type(1) {
            position: absolute;
        }
        
        .outer img:nth-of-type(2) {
            position: absolute;
            left: 180px;
            top: 0;
            color: white;
            padding-left: 20px;
        }
        
        .first span {
            position: absolute;
            background-color: #d96160;
        }
        
        .second span {
            position: absolute;
            background-color: #134752;
        }
        
        .third span {
            position: absolute;
            background-color: #2271af;
        }
    </style>
</head>

<body>
    <section>
        <header>专辑推荐</header>
        <div class="outer first">
            <img src="images/1_1.jpg" alt="">
            <span>COCOON/可可尼</span>
            <img src="images/1_2.jpg" alt="">
            <span>几何为网-极致绚烂</span>
        </div>
        <div class="outer second">
            <img src="images/2_1.jpg" alt="">
            <span>INSUN/恩裳</span>
            <img src="images/2_2.jpg" alt="">
            <span>2017春印象</span>
        </div>
        <div class="outer third">
            <img src="images/3_1.jpg" alt="">
            <span>JNBY/江南布衣</span>
            <img src="images/3_2.jpg" alt="">
            <span>NANMENG/南梦</span>
        </div>
    </section>
</body>

</html>
<script>
    $('.outer').hover(function () {
        console.log('111');
        //  鼠标移进时两张图片的切换
        $(this).find('img:nth-of-type(1)').stop().animate({
            left: -180,
            top: 0,
        });
        $(this).find('img:nth-of-type(2)').stop().animate({
            left: -20,
            top: 0,
        });
        //  鼠标移进时文字的切换
        $(this).find('span:nth-of-type(1)').stop().animate({
            left: 0,
            bottom: -20
        });
        $(this).find('span:nth-of-type(2)').stop().animate({
            left: 0,
            bottom: 0
        });

    }, function () {
        //  鼠标移开时两张图片的切换
        $(this).find('img:nth-of-type(1)').stop().animate({
            left: 0,
            top: 0,
        });
        $(this).find('img:nth-of-type(2)').stop().animate({
            left: 180,
            top: 0,
        });
      
        //  鼠标移开时文字的切换
        $(this).find('span:nth-of-type(1)').stop().animate({
            left: 0,
            bottom: 0
        });
        $(this).find('span:nth-of-type(2)').stop().animate({
            left: 0,
            bottom: -20
        });
    });

</script>